<template>
  <div>
    <AddEditNote
      v-model="inputNote"
    >
      <div class="control">
        <button
          class="button is-link has-background-success"
          @click="handleClick"
          :disabled="inputNote === ''"
        >
          添加事项
        </button>
      </div>
    </AddEditNote>
    <Note v-for="note in notes" :note="note" />
    <div>
      {{ msg }}
      <button @click="changeMsg">change msg</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import AddEditNote from '../components/Notes/AddEditNote.vue'
import Note from '@/components/Notes/Notes.vue'

import { useNodesStore } from '@/store/notesStore.js'

const notesStore = useNodesStore()
const { changeMsg, add } = notesStore
const { notes, msg } = storeToRefs(notesStore)

const inputNote = ref('')

const handleClick = () => {
  add({
    id: Math.ceil(Math.random() * 1000000),
    content: inputNote.value
  })
  inputNote.value = ''
}

watch(inputNote, (newValue) => {
  if (newValue.length >= 100) {
    // 修复都一个字符的 bug
    inputNote.value = newValue.slice(0, newValue.length - 1)
    alert('输入的字数不能超过 100。')
  }
})

</script>